<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>MeetAll-品质生活从这里开始</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<link rel="stylesheet" href="/app/styles/base.css">
		<link rel="stylesheet" href="/common/css/slider/slider.css">
		<link rel="stylesheet" href="/common/css/slider/slider.default.css">
		<link rel="stylesheet" href="/common/css/zmu.css">
		<link rel="stylesheet" href="/app/styles/leader.css">

		<script type="text/javascript" src="/common/js/zepto.js"></script>
		<script type="text/javascript" src="/common/js/zmu.js"></script>
		<script type="text/javascript" src="/common/js/slider/slider.js"></script>
		<script type="text/javascript" src="/common/js/slider/dots.js"></script>
		<script type="text/javascript" src="/common/js/slider/$touch.js"></script>
		<script type="text/javascript" src="/common/js/slider/$autoplay.js"></script>
		<script type="text/javascript" src="/common/js/slider/$lazyloadimg.js"></script>
		<script type="text/javascript" src="/app/js/commons.js"></script>
		
<style type="text/css">
.img-loading {
	width:35px;
	height:35px;
	margin: 0 auto;
	margin-top: 5px;
	margin-bottom: 5px;
}

.div-product {
	width: 100%;
	max-width: 300px;
	height: 135px;
	background-color: white;
	margin: 0 auto;
	margin-top: 8px;
	text-align: left;
	font-size: 12px;
}

.div-image {
	width: 60%;
	height: 100%;
	float: left;
}

.div-name {
	width: 40%;
	height: 30%;
	float: right;
}

.p-name {
	color: #ff3f40;
	font-weight: bold;
	text-indent: 10px;
	padding-left: 6px;
	padding-right: 6px;
}
.p-description {
	text-indent: 10px;
	padding-left: 6px;
	padding-right: 6px;
}

.div-description {
	width: 40%;
	height: 60%;
	float: right;
}

.img-product {
	width: 100%;
	height: 100%;
}

</style>
		
	</head>

  	<body>
		<header style="display: none;">
			<div class="titleWrap">
				<a href="javascript:void(0)" onclick="window.history.back();" class="a-back">
					<span class="cheek1">返回</span>
				</a>
				搜索列表
				<a href="javascript:scroll(0,0);" class="a-screen">
					<span class="cheek1">筛选</span>
				</a>
			</div>
		</header>
		
		<div class = "div-leader">
			<table class = "table-leader" id="leader" border="0" cellspacing="0" cellpadding="0">
			</table>
		</div>
		<div class="m-zp" style="margin-top: 15px; margin-bottom: 15px;">
			<div style="display: none;">
				<iframe src="slider.html" width="100%" height="100%" name="banner" scrolling="no" frameborder="0" style="padding: 0;margin: 0;width: 100%;height: 100%;" width="100%" height="100%" scrolling="no" frameborder="0"></iframe>
			</div>
			<div id="slider" class="ui-slider">
				<div>
					<a href="http://m.zhenpin.com/special/autumn_shopping_2014.html"><img
						lazyload='images/1.jpg'
						width="300" height='131'></a>
				</div>
				<div>
					<a href="http://m.zhenpin.com/promotion2/new_arrivals_all_1475.html"><img
						lazyload='images/2.jpg'
						width="300" height='131'></a>
				</div>
				<div>
					<a href="http://m.zhenpin.com/index.php?c=special&id=156"><img
						lazyload='images/3.jpg'
						width="300" height='131'></a>
				</div>
				<div>
					<a href="http://m.zhenpin.com/promotion2/beauty_products_1461.html"><img
						lazyload='images/4.jpg'
						width="300" height='131'></a>
				</div>
				<!-- <a href="http://m.zhenpin.com/promotion2/beauty_products_1461.html"><img lazyload="http://zhenimg.com/special_img/special_group_img/527386f7a551f9852ffc10ad80b8fa24.jpg" width="300"></a> -->
		
			</div>
		
			<script>
				$('#slider').slider({
					loop : true
				});
			</script>
		</div>
		
		<div class="content" style="margin-top: 0px;padding-top: 0px;">
			<form id="form-category" >
				<input type="hidden" name = "category_id" id="input-category" value="0"/>
				<input type="hidden" name = "page_no" id="page_no" value="1"/>
				<input type="hidden" name = "page_size" id="page_size" value="3"/>
			</form>
			<div class="m-zp">
				<div id="div-product-list">
					
				</div>
				<img class = "img-loading" src="/images/resource/loading3.gif" />
			</div>
		</div>
		<footer>
			<div class="footerWrap">
				<iframe src="/app/footer.html" style="padding: 0;margin: 0;width: 100%;height: 100%;" width="100%" height="100%" scrolling="no" frameborder="0"></iframe>
			</div>
		</footer>
		<div style="height: 50px;"></div>
		
		<div class="bottom">
			<div class="bottomWrap">
				<iframe src="bottom.html" style="padding: 0;margin: 0;width: 100%;height: 100%;" width="100%" height="100%" scrolling="no" frameborder="0"></iframe>
			</div>
		</div>
	</body>
	
	<script type="text/javascript">
		$(document).ready(function() {
			var catagory = cjl.requestData("catagory");
			initPage(catagory);
		});
		
		function cclick() {
			var testInput = CJL.$("tx1");
			for(var i = 0; i < testInput.length; i++) {
				alert(testInput[i].value);
			}
		}
		
		function initPage(catagory) {
			var url = "/common/catagory";
			var params = '';
			cjl.get(url, params, function(body) {
				var list = body;
				var html = '<tr>';
				if(catagory == null || catagory == 0) {
					html += '<td class="menu2" onclick="toCatagory(0)">推荐</td>';
					$("#input-recommend").attr("checked",true)
				} else {
					html += '<td class="menu1" onclick="toCatagory(0)">推荐</td>';
				}
				for ( var o in list) {
					var common_bean = list[o];
					if(catagory == common_bean.id) {
						html += '<td class="menu2" onclick="toCatagory('+common_bean.id+')">'+common_bean.name+'</td>';
						$("#input-category").val(common_bean.id);
					} else {
						html += '<td class="menu1" onclick="toCatagory('+common_bean.id+')">'+common_bean.name+'</td>';
					}
				}
				html += '</tr>';
				
				$("#leader").html(html);
				
				$(".img-loading").show();
		        getProductByPage(catagory);
				
				$(window).scroll(function () {
					var $body = $("body");
					  var $html = "";
		              $html += "<br/>" + ($(window).height() + $(window).scrollTop());
		              $html += "<br/>window.height: " + $(window).height();
		              $html += "<br/>body.height: " + $body.height();
		              $html += "<br/>window.scrollTop: " + $(window).scrollTop();
		              $("#page_tag_bottom").html($html);
		             if (($(window).height() + $(window).scrollTop()) >= $body.height()) {
		            	 $(".div-loading").show();
		                 getProductByPage(catagory);
		                 
		             }
		         });
				
				
			});
		}
		
		function getProductByPage(catagory) {
			var $product_list = $('#div-product-list');
			var url = "/product/list";
			var params = $("#form-category").serialize();
			var page_no = $("#page_no").val();
			var page_size = $("page_size").val();
			page_no ++;
			$("#page_no").val(page_no);
			cjl.get(url, params, function(page) {
				$(".img-loading").hide();
				var totalCount = page.totalCount;
				var list = page.result;
				var pageCount = Math.ceil(totalCount / page_size);
				if(page_no > pageCount) {
					return;
				}
				
				for ( var o in list) {
					var product = list[o];
					var html = '';
					html += '<div class = "div-product" onclick="location.href=\'/app/product.html?product_id='+product.id+'\'">';
					html += '<div class = "div-image">';
					html += '<img class = "img-product" src='+product.image+' />';
					html += '</div>';
					html += '<div class = "div-name"><p class="p-name">'+product.name+'</p>';
					html += '<p class="p-description">'+product.description+'</p></div>';
					html += '</div>';
					
					$product_list.append(html);
				} 
			});
		}
		
		function toCatagory(id) {
			var url = window.location.href;
			var pos = url.indexOf("?");
			if(pos > 0) {
				url = url.substr(0, pos);
			}
			url += "?catagory="+id;
			location.replace(url);
		}
	</script>
</html>
